<template>
  <div class="app">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="small" label-width="100px">
        <el-col :span="8">
          <el-form-item label="一级科室">
            <el-select
              v-model="onedept"
              placeholder="请输入挂号科室"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in deptList"
                :key="index"
                :label="item.deptName"
                :value="item.deptId"
                :disabled="item.disabled"
                @click.native="getDept(item.deptName)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="二级科室">
            <el-select
              v-model="formData.docDept"
              placeholder="请输入挂号科室"
              clearable
              :style="{ width: '100%' }"
              @change="getDoc"
            >
              <el-option
                v-for="(item, index) in deptList2"
                :key="index"
                :label="item.deptName"
                :value="item.deptName"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="看诊医生">
            <el-select
              v-model="formData.docName"
              placeholder="请选择看诊医生"
              clearable
              :style="{ width: '100%' }"
              @change="getList"
            >
              <el-option
                v-for="(item, index) in hzDocOptions"
                :key="index"
                :label="item.docName"
                :value="item.docName"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <Table :columns="rosterColumns" :data="rosterData">
      <template slot-scope="{ row }" slot="day0am">
        <el-checkbox
          :value="row.day0am == 0 ? false : true"
          @change="updateRoster(row, 'day0am')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day0pm">
        <el-checkbox
          :value="row.day0pm == 0 ? false : true"
          @change="updateRoster(row, 'day0pm')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day1am">
        <el-checkbox
          :value="row.day1am == 0 ? false : true"
          @change="updateRoster(row, 'day1am')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day1pm">
        <el-checkbox
          :value="row.day1pm == 0 ? false : true"
          @change="updateRoster(row, 'day1pm')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day2am">
        <el-checkbox
          :value="row.day2am == 0 ? false : true"
          @change="updateRoster(row, 'day2am')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day2pm">
        <el-checkbox
          :value="row.day2pm == 0 ? false : true"
          @change="updateRoster(row, 'day2pm')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day3am">
        <el-checkbox
          :value="row.day3am == 0 ? false : true"
          @change="updateRoster(row, 'day3am')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day3pm">
        <el-checkbox
          :value="row.day3pm == 0 ? false : true"
          @change="updateRoster(row, 'day3pm')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day4am">
        <el-checkbox
          :value="row.day4am == 0 ? false : true"
          @change="updateRoster(row, 'day4am')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day4pm">
        <el-checkbox
          :value="row.day4pm == 0 ? false : true"
          @change="updateRoster(row, 'day4pm')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day5am">
        <el-checkbox
          :value="row.day5am == 0 ? false : true"
          @change="updateRoster(row, 'day5am')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day5pm">
        <el-checkbox
          :value="row.day5pm == 0 ? false : true"
          @change="updateRoster(row, 'day5pm')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day6am">
        <el-checkbox
          :value="row.day6am == 0 ? false : true"
          @change="updateRoster(row, 'day6am')"
        ></el-checkbox>
      </template>
      <template slot-scope="{ row }" slot="day6pm">
        <el-checkbox
          :value="row.day6pm == 0 ? false : true"
          @change="updateRoster(row, 'day6pm')"
        ></el-checkbox>
      </template>
    </Table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listDept } from "@/api/system/dept";
import { listDocList, updateDocList } from "@/api/doclist/docList";
export default {
  data() {
    return {
    pageNum:1,
    pageSize: 10,
    total:0,
      checkList: [],
      deptList: null,
      deptList2: null,
      hzDocOptions: null,
      onedept: null,
      formData: {
        docName: null,
        docDept: null,
      },
      rosterColumns: [
        {
          title: "医生名称",
          width: "150",
          align: "center",
          key: "docName",
        },
        {
          title: "星期天上午",
          align: "center",
          slot: "day0am",
          key: "day0am",
        },
        {
          title: "星期天下午",
          align: "center",
          slot: "day0pm",
          key: "day0pm",
        },
        {
          title: "星期一上午",
          align: "center",
          slot: "day1am",
          key: "day1am",
        },
        {
          title: "星期一下午",
          align: "center",
          slot: "day1pm",
          key: "day1pm",
        },
        {
          title: "星期二上午",
          align: "center",
          slot: "day2am",
          key: "day2am",
        },
        {
          title: "星期二下午",
          align: "center",
          slot: "day2pm",
          key: "day2pm",
        },
        {
          title: "星期三上午",
          align: "center",
          slot: "day3am",
          key: "day3am",
        },
        {
          title: "星期三下午",
          align: "center",
          slot: "day3pm",
          key: "day3pm",
        },
        {
          title: "星期四上午",
          align: "center",
          slot: "day4am",
          key: "day4am",
        },
        {
          title: "星期四下午",
          align: "center",
          slot: "day4pm",
          key: "day4pm",
        },
        {
          title: "星期五上午",
          align: "center",
          slot: "day5am",
          key: "day5am",
        },
        {
          title: "星期五下午",
          align: "center",
          slot: "day5pm",
          key: "day5pm",
        },
        {
          title: "星期六上午",
          align: "center",
          slot: "day6am",
          key: "day6am",
        },
        {
          title: "星期六下午",
          align: "center",
          slot: "day6pm",
          key: "day6pm",
        },
      ],
      rosterData: [],
    };
  },
  created() {
    // listDocList().then((res) => {
    //   this.rosterData = res.rows;
    // });
    this.getList();
    listDept({ parentId: 100 }).then((res) => {
      this.deptList = res.data;
      console.log(res);
    });
  },
  methods: {
      getList(){
         listDocList({pageNum:this.pageNum,pageSize:this.pageSize,...this.formData}).then(res=>{
             this.rosterData=res.rows;
             this.total=res.total
         }) 
      },
    updateRoster(res, index) {
      console.log(res[`${index}`]);
      if (res[`${index}`] == 1) {
        res[`${index}`] = 0;
        updateDocList(res).then((res) => {
          //   console.log(res);
        });
      } else {
        res[`${index}`] = 1;
        updateDocList(res).then((res) => {
          //   console.log(res);
        });
      }
    },
    // 获取第二科室
    getDept(deptName) {
      console.log(deptName);
      this.formData.docName = null;
      this.formData.docDept = null;
      this.$nextTick(() => {
        listDocList({ pageNum:this.pageNum,pageSize:this.pageSize,docDept1: deptName }).then((res) => {
          this.rosterData = res.rows;
          this.total=res.total
        });
        listDept({ parentId: this.onedept }).then((res) => {
          this.deptList2 = res.data;
        });
      });
    },
    getDoc() {
      this.formData.docName = null;
      this.$nextTick(() => {
        listDocList({
            pageNum:this.pageNum,pageSize:this.pageSize,
          docDept: this.formData.docDept,
        }).then((res) => {
          console.log(this.formData.hzDpet, res);
          this.hzDocOptions = res.rows;
          this.rosterData = res.rows;
          this.total=res.total;
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app {
  padding: 20px;
}
::v-deep {
  .pagination-container .el-pagination {
    width: 100%;
    text-align: center;
  }
}
</style>
